<template>
  <div @click="sayMsg">
    <h1>P150 - computed属性</h1>
    <button @click="isZheDie = !isZheDie">
      {{ isZheDie ? "解除" : "折叠" }}
    </button>
    <div v-show="!isZheDie">
      姓: <input type="text" v-model="person.firstName" />
      <br />
      名: <input type="text" v-model="person.lastName" />
      <br />
      可修改的全名: <input type="text" v-model="person.fullName2" />
      <br />
      <h4>不可修改的全名: {{ person.fullname }}</h4>
    </div>
  </div>
</template> 
        
  <script>
import { computed, reactive, ref } from "vue";
export default {
  name: "App",
  props: ["msg"],
  setup(props, context) {
    let person = reactive({
      firstName: "",
      lastName: "",
      // 简写形式的computed, 不考虑计算属性被修改的情况
      fullname: computed(() => {
        return person.firstName + "-" + person.lastName;
      }),
      // 完整形式的computed，不过我们一般开发中不会修改computed，但不排除个别复杂需求
      fullName2: computed({
        get() {
          return person.firstName + "-" + person.lastName;
        },
        set(value) {
          console.log(value);
          let nameArr = value.split("-");
          person.firstName = nameArr[0];
          person.lastName = nameArr[1];
        },
      }),
    });
    let isZheDie = ref(false);

    return {
      person,
      isZheDie,
    };
  },
};
</script>
        
<style>
.zhedie {
  height: 15px;
  overflow: hidden;
}
</style>
        